<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String basepath = request.getContextPath(); %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>蜂流器</title>
    <meta name="description" content="">
    <meta name="author" content="templatemo">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,700' rel='stylesheet'
          type='text/css'>
    <link href="<%=basepath%>/css/font-awesome.min.css" rel="stylesheet">
    <link href="<%=basepath%>/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=basepath%>/css/templatemo-style.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .modalDialog {
            position: fixed;
            font-family: Arial, Helvetica, sans-serif;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 99999;
            opacity: 0;
            -webkit-transition: opacity 400ms ease-in;
            -moz-transition: opacity 400ms ease-in;
            transition: opacity 400ms ease-in;
            pointer-events: none;
        }

        .modalDialog:target {
            opacity: 1;
            pointer-events: auto;
        }

        .modalDialog > div {
            width: 400px;
            position: relative;
            margin: 10% auto;
            padding: 5px 20px 13px 20px;
            border-radius: 10px;
            background: #fff;
            background: -moz-linear-gradient(#fff, #999);
            background: -webkit-linear-gradient(#fff, #999);
            background: -o-linear-gradient(#fff, #999);
        }

        .close {
            background: #606061;
            color: #FFFFFF;
            line-height: 25px;
            position: absolute;
            right: -12px;
            text-align: center;
            top: -10px;
            width: 24px;
            text-decoration: none;
            font-weight: bold;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 12px;
            -moz-box-shadow: 1px 1px 3px #000;
            -webkit-box-shadow: 1px 1px 3px #000;
            box-shadow: 1px 1px 3px #000;
        }

        .close:hover {
            background: #00d9ff;
        }
    </style>
</head>
<body>
<!-- Left column -->
<div class="templatemo-flex-row">
    <div class="templatemo-sidebar">
        <header class="templatemo-site-header">
            <h1>蜂流器</h1>
        </header>
        <div class="profile-photo-container">
            <center><img src="<%=basepath%>/img/profile-photo.png" alt="Profile Photo" class="img-responsive"></center>
        </div>
        <br>
        <div class="mobile-menu-icon">
            <i class="fa fa-bars"></i>
        </div>
        <nav class="templatemo-left-nav">
            <ul>
                <li><a href="<%=basepath%>/index.jsp"><i class="fa fa-database fa-fw"></i>任务管理</a></li>
                <li><a href="<%=basepath%>/step1.jsp"><i class="fa fa-database fa-fw"></i>&nbsp;&nbsp;&nbsp;&nbsp;-1.
                    选择目标数据库</a></li>
                <li><a href="<%=basepath%>/step2.jsp"><i class="fa fa-database fa-fw"></i>&nbsp;&nbsp;&nbsp;&nbsp;-2.
                    选择开放表与列</a></li>
                <li><a href="<%=basepath%>/step3.jsp" class="active"><i class="fa fa-database fa-fw"></i>&nbsp;&nbsp;&nbsp;&nbsp;-3.
                    确认上传</a></li>
            </ul>
        </nav>
    </div>
    <div class="templatemo-content col-1 light-gray-bg" id="contentBox">
        <!-- navi -->
        <div class="templatemo-top-nav-container">
            <div class="row">
                <nav class="templatemo-top-nav col-lg-12 col-md-12">
                    <ul class="text-uppercase">
                        <li><a class="active" onclick="">确认上传</a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <!-- main content -->
        <div class="templatemo-content-container selectConditionTable">
            <div class="templatemo-content-widget no-padding">
                <c:if test="${empty tables}">
                    <h3 style="text-align: center;"><b>数据为空!</b></h3><br/>
                </c:if>
                <c:forEach var="item1" items="${openedTableColumn}" varStatus="status">
                    <h3><b> 表 ${status.index+1}: </b><b><a href="${item1.key[1]}">${item1.key[0]}</a></b></h3><br/>
                    <div class="panel panel-default table-responsive">
                        <table class="table table-striped table-bordered templatemo-user-table" name="selectTable">
                            <thead>
                            <tr>
                                <td><a href="" class="white-text templatemo-sort-by"># <span class="caret"></span></a>
                                </td>
                                <td><a href="" class="white-text templatemo-sort-by">列名 <span class="caret"></span></a>
                                </td>
                                <td><a href="" class="white-text templatemo-sort-by">描述<span class="caret"></span></a>
                                </td>
                            </tr>
                            </thead>
                            <tbody id="listBody">
                            <c:forEach var="item2" items="${item1.value}" varStatus="status">
                                <tr>
                                    <td>${status.index+1}</td>
                                    <td><a class="dataUrls" href="${item2[2]}">${item2[0]}</a></td>
                                    <c:if test="${empty item2[1]}">
                                        <td><input class="comments" type="text" value=""></td>
                                    </c:if>
                                    <c:if test="${not empty item2[1]}">
                                        <td><input class="comments" type="text" value="${item2[1]}"></td>
                                    </c:if>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </c:forEach>
            </div>
            <button type="button" class="btn btn-info pull-right" style="margin:0 auto" onclick="saveComments(this)">保存提交
            </button>
            <div style="clear:both"></div>
        </div>
        <%--<a href="#openModal" id="showUploadModel" style="display:none;">Open Modal</a>
        <div id="openModal" class="modalDialog">
            <div><br />
                <a href="#close" title="Close" class="close">X</a>
                <h3>请输入graph信息,上传信息至LSH系统</h3><br />
              <div class="form-group">
                <label for="IPAddress">graph地址</label>
                <input type="text" class="form-control" id="graphAddress" placeholder="graph地址">
              </div>
              <div class="form-group">
                <label for="IPAddress">用户名</label>
                <input type="text" class="form-control" id="userName" placeholder="用户名">
              </div>
              <div class="form-group">
                <label for="IPAddress">密码</label>
                <input type="text" class="form-control" id="userPwd" placeholder="密码">
              </div>
              <button type="button" class="btn btn-default " onclick="upLoad()">确认并提交</button>
            </div>
        </div>--%>
        <footer class="text-right">
            <p>Copyright &copy; 2016 语义信息科技有限公司
                | Designed by <a href="http://www.usources.cn" target="_blank">USources</a></p>
        </footer>
    </div>
</div>
<div>
</div>
<!-- JS -->
<script type="text/javascript" src="<%=basepath%>/js/jquery-2.1.0.min.js"></script>      <!-- jQuery -->
<script type="text/javascript" src="<%=basepath%>/js/templatemo-script.js"></script>      <!-- Templatemo Script -->
<script type="text/javascript">
    function saveComments(e) {
        $(e).text("正在保存...").attr("onclick","");
        var dataUrls_a = $(".dataUrls");
        var dataUrls = [];
        for (var i = 0; i < dataUrls_a.length; i++) {
            dataUrls.push($(dataUrls_a[i]).attr("href"));
        }
        var comments_input = $(".comments");
        var comments = [];
        for (var i = 0; i < comments_input.length; i++) {
            comments.push($(comments_input[i]).val());
        }
        var dataUrlJson = JSON.stringify(dataUrls);
        var commentJson = JSON.stringify(comments);
        $.ajax({
            type: "POST",
            url: "<%=basepath%>/insertComments",
            data: {uris: dataUrlJson, comments: commentJson},
            success: function (data) {
                if (data == 1) {
                    if (window.confirm("保存成功,确认后将上传至LSH系统")) {
                        upLoad(e);
                    }else{
                        $(e).text("保存提交").attr("onclick","saveComments(this)");
                    }
                } else {
                    $(e).text("保存提交").attr("onclick","saveComments(this)");
                    alert("保存失败!");
                }
            },
            error: function (error) {
                $(e).text("保存提交").attr("onclick","saveComments(this)");
                console.log(error);
                alert("网络异常,请稍后重试!");
            }
        });
    }
    function upLoad(e) {
        $.ajax({
            type: "POST",
            url: "<%=basepath%>/upLoad",
            data: {},
            success: function (data) {
                $(e).text("保存提交").attr("onclick","saveComments(this)");
                if (data == 1) {
                    alert("上传成功!");
                    window.location.href = "<%=basepath%>/index.jsp";
                } else {
                    alert("上传失败!");
                }
            },
            error: function (error) {
                $(e).text("保存提交").attr("onclick","saveComments(this)");
                console.log(error);
                alert("网络异常,请稍后重试!");
            }
        });
    }
</script>
</body>
</html>